<template>
  <div class="box">
    <!-- 导航栏 -->
    <van-nav-bar title="我的购物车">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <!-- 卡片 -->
    <van-swipe-cell
      v-show="num > 0"
      v-for="(item, index) in goods_list"
      :key="index"
    >
      <van-card :title="item.goodsName" class="goods-card">
        <template #price>
          <span class="sp1">￥{{ item.sellingPrice }}</span>
        </template>
        <template #footer>
          <van-stepper
            @change="numChange(item)"
            max="5"
            v-model="item.goodsCount"
          />
        </template>
        <template #thumb>
          <div class="images">
            <van-checkbox
              @change="list_Change"
              v-model="item.checked"
              shape="round"
            ></van-checkbox>
            <img :src="item.goodsCoverImg" alt="" />
          </div>
        </template>
      </van-card>
      <template #right>
        <van-button
          @click="del_goods(item.cartItemId)"
          icon="delete-o"
          type="danger"
          class="delete-button"
        />
      </template>
    </van-swipe-cell>
    <van-empty
      v-if="num == 0"
      class="custom-image"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      description="购物车空空如也，请先去狂一逛"
    />
    <!-- 底部tob -->
    <van-submit-bar :price="money * 100" button-text="结算" @submit="onSubmit">
      <van-checkbox v-model="checked" @click="AllChange">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, computed } from 'vue'
import { goodsList, goodsNum, goodsDel } from '../../request/goods.js'
import { Toast, Dialog } from 'vant'
import { useRouter, useRoute } from 'vue-router'
// import bus from "@/libs/bus";

export default {
  setup() {
    //   定义数据
    const state = reactive({
      goods_list: [],
      checked: true,
      num: JSON.parse(sessionStorage.getItem('num')) || 0,
    })
    const router = useRouter()
    // 获取数据
    let GoodsList = async () => {
      // console.log("我被掉用");
      let res = await goodsList()
      console.log(res)
      if (res.data.resultCode == 200) {
        res.data.data.forEach((item) => {
          item.checked = true
        })
        state.num = res.data.data.length
        state.goods_list = res.data.data
      } else {
        state.num = 0
      }
      sessionStorage.setItem('num', JSON.stringify(state.num))
    }
    // 挂载数据
    onMounted(() => {
      GoodsList()
    })
    // 定义事件
    let numChange = async (item) => {
      let arr = {
        cartItemId: item.cartItemId,
        goodsCount: item.goodsCount,
      }
      await goodsNum(arr)
      GoodsList()
      Toast.success('修改成功')
    }
    let onSubmit = (e) => {
      router.push({ path: '/weizhi' })
    }
    let AllChange = () => {
      state.goods_list.map((item) => {
        item.checked = state.checked
      })
    }
    let list_Change = () => {
      let flag = state.goods_list.every((item) => item.checked)
      state.checked = flag
    }
    let del_goods = (id) => {
      console.log(id)
      Dialog.confirm({
        title: '提示',
        message: '是否永久删除该商品？',
      })
        .then(async () => {
          let res = await goodsDel(id)
          if (res.resultCode == 200) {
            Toast.success('删除成功')
            GoodsList()
          }
          router.go(0)
        })
        .catch(() => {
          return false
        })
    }

    // 计算属性  reduce()
    const money = computed(() => {
      let num = 0
      state.goods_list.forEach((item) => {
        if (item.checked) {
          num += item.goodsCount * item.sellingPrice
        }
      })
      return num
    })
    // bus总线程
    // bus.emit("nums",state.num)

    return {
      ...toRefs(state),
      onMounted,
      numChange,
      onSubmit,
      AllChange,
      list_Change,
      money,
      del_goods,
    }
  },
}
</script>

<style lang="scss" scoped>
.van-submit-bar {
  bottom: 1.3rem !important;
}
.delete-button {
  height: 100%;
}
.box {
  margin-bottom: 2.9rem;
}
.van-swipe-cell {
  border-bottom: 1px solid #ccc;
}
.sp1 {
  color: red;
  font-size: 0.4rem;
}
.images {
  width: 100%;
  display: flex;
  margin-top: 0.5rem;
  justify-content: space-between;
  align-items: center;
  img {
    width: 1.8rem;
  }
}
</style>
